<template>
  <view class="news-content">
    <view class="common-news" v-for="(item, index) in newsList" :key="index" @click="toNewsDetail(item)">
      <view v-if="item.coverPath == null || item.coverPath == ''">
        <view class="news-title">
          {{ item.title }}
        </view>
        <view class="news-desc">
          <view>{{ item.createByName }} {{ item.createTime }}</view>
          <text>{{ item.numberOfComments }}评论</text>
        </view>
      </view>
      <view v-if="item.coverPath">
        <view class="news-title">
          {{ item.title }}
        </view>
        <flexOne v-if="item.coverPath.split(',').length === 1" :res="item.coverPath.split(',')"></flexOne>
        <flexTwo v-if="item.coverPath.split(',').length === 2" :res="item.coverPath.split(',')"></flexTwo>
        <flexThree v-if="item.coverPath.split(',').length >= 3" :res="item.coverPath.split(',')"></flexThree>
        <view class="news-desc">
          <view>{{ item.createByName }} {{ item.createTime }}</view>
          <text>{{ item.numberOfComments }}评论</text>
        </view>
      </view>
    </view>
  </view>
</template>
e
<script>
import tpl_flex_one from './template/tpl_flex_one.vue' //单行图片模块
import tpl_flex_two from './template/tpl_flex_two' //两张横图模块
import tpl_flex_three from './template/tpl_flex_three.vue' //三列单行图片模块
export default {
  props: {
    newsList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // mock
      list: [
        {
          drawer: true,
          img: 'md-image',
          model: 'flexOne',
          name: '一张大图',
          coverPath: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif',
          notAdd: true
        }
      ],
      // 宫格普通样式
      commonStyle: {
        width: 'auto',
        height: 'auto',
        border: '1px solid #D5D5D5',
        borderRadius: '10rpx',
        padding: '0',
        marginBottom: '30rpx'
      }
    }
  },
  onLoad() {
    console.log(this.newsList)
  },
  components: {
    flexOne: tpl_flex_one,
    flexTwo: tpl_flex_two,
    flexThree: tpl_flex_three
  },
  methods: {
    toNewsDetail(item) {
      uni.setStorageSync('newsDetail', item)
      uni.navigateTo({
        url: '/pages/doctor/newsDetail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.news-content {
  background-color: #fff;
  border-radius: 14rpx;

  .common-news {
    padding: 40rpx 0;
    margin: 0 24rpx;
    border-bottom: 1px solid #e3e3e3;

    &:last-child {
      border-bottom: none;
    }

    .news-title {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 40rpx;
    }

    .news-desc {
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 20rpx;
      font-weight: 500;
      color: #999999;
    }
  }
}

// 改变原模版样式
.layout {
  padding: 0 0 20rpx;

  img {
    margin-right: 20rpx;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
